<template>
  <div class="settings-container">
    <a-card title="系统设置">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="基本设置">
          <a-form :model="basicSettings" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="系统名称">
              <a-input v-model:value="basicSettings.systemName" />
            </a-form-item>
            <a-form-item label="系统描述">
              <a-textarea v-model:value="basicSettings.systemDesc" :rows="4" />
            </a-form-item>
            <a-form-item label="联系邮箱">
              <a-input v-model:value="basicSettings.contactEmail" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4 }">
              <a-space>
                <a-button type="primary" @click="handleSave">保存</a-button>
                <a-button @click="handleReset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <a-tab-pane key="2" tab="安全设置">
          <a-form :model="securitySettings" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="密码强度">
              <a-select v-model:value="securitySettings.passwordStrength">
                <a-select-option value="low">低</a-select-option>
                <a-select-option value="medium">中</a-select-option>
                <a-select-option value="high">高</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="会话超时">
              <a-input-number
                v-model:value="securitySettings.sessionTimeout"
                :min="5"
                :max="120"
                addon-after="分钟"
              />
            </a-form-item>
            <a-form-item label="启用双因素认证">
              <a-switch v-model:checked="securitySettings.twoFactorAuth" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4 }">
              <a-space>
                <a-button type="primary" @click="handleSave">保存</a-button>
                <a-button @click="handleReset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <a-tab-pane key="3" tab="通知设置">
          <a-form :model="notificationSettings" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="邮件通知">
              <a-switch v-model:checked="notificationSettings.emailNotification" />
            </a-form-item>
            <a-form-item label="短信通知">
              <a-switch v-model:checked="notificationSettings.smsNotification" />
            </a-form-item>
            <a-form-item label="系统通知">
              <a-switch v-model:checked="notificationSettings.systemNotification" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4 }">
              <a-space>
                <a-button type="primary" @click="handleSave">保存</a-button>
                <a-button @click="handleReset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

const activeKey = ref('1')

// 基本设置
const basicSettings = reactive({
  systemName: '账户系统',
  systemDesc: '这是一个账户管理系统',
  contactEmail: 'admin@example.com'
})

// 安全设置
const securitySettings = reactive({
  passwordStrength: 'medium',
  sessionTimeout: 30,
  twoFactorAuth: false
})

// 通知设置
const notificationSettings = reactive({
  emailNotification: true,
  smsNotification: false,
  systemNotification: true
})

// 保存设置
const handleSave = () => {
  message.success('保存成功')
}

// 重置设置
const handleReset = () => {
  message.info('已重置')
}
</script>

<style scoped>
.settings-container {
  max-width: 1000px;
}
</style>